<template>
  <div class="app">
    <a-breadcrumb style="margin-bottom: 10px">
      <a-breadcrumb-item>综治组织/ 楼栋长内容</a-breadcrumb-item>
    </a-breadcrumb>
    <a-row class="pd20 mt20">
      <a-col :span="6">
        楼栋长名称：
        <a-input placeholder="请输入" v-model="queryForm.buildingOwner" />
      </a-col>
      <a-col :span="6">
        联系方式：
        <a-input placeholder="请输入" v-model="queryForm.buildingOwnerPhone" />
      </a-col>
      <a-col :span="6">
        小区名称：
        <a-input placeholder="请输入" v-model="queryForm.areaName" />
      </a-col>
      <a-col :span="6">
        楼栋名称：
        <a-input placeholder="请输入" v-model="queryForm.buildingName" />
      </a-col>
      <a-col :span="6">
        小区所在地：
        <a-input placeholder="请输入" v-model="queryForm.buildingAddr" />
      </a-col>
      <a-col :span="6">
        当选时间：
        <a-date-picker v-model="queryForm.pushTime" valueFormat="YYYY-MM-DD" />
      </a-col>
      <a-col :span="9">
        创建时间范围：
        <a-range-picker
          style="width: 330px; margin-left: 10px"
          v-model="dateRange"
          :placeholder="['开始日期', '结束日期']"
          valueFormat="YYYY-MM-DD HH:mm:ss"
          :show-time="{
            hideDisabledOptions: true,
            defaultValue: [
              moment('00:00:00', 'HH:mm:ss'),
              moment('23:59:59', 'HH:mm:ss'),
            ],
          }"
          format="YYYY-MM-DD HH:mm:ss"
          @change="onChangePushTime"
        />
      </a-col>
      <a-col :span="3">
        <a-button type="primary" @click="getList"> 查询 </a-button>&emsp;&nbsp;
        <a-button @click="reset">重置</a-button>
      </a-col>
    </a-row>
    <a-row class="pd20 mt20">
      <div class="flex-between">
        <div class="flex-start">
          <a-button
            type="primary"
            @click="addFn"
            v-hasPermi="['zhonghe:ldznr:import']"
            >导入</a-button
          >
          <a-button
            type="primary"
            @click="addFn"
            v-hasPermi="['zhonghe:ldznr:export']"
            >导出</a-button
          >
        </div>
        <div class="flex-end">
          <a-button
            type="primary"
            @click="addFn"
            v-hasPermi="['zhonghe:ldznr:add']"
            >添加</a-button
          >
          <a-button
            v-if="false"
            type="danger"
            @click="delFn"
            v-hasPermi="['zhonghe:ldznr:del']"
            >删除</a-button
          >
        </div>
      </div>
      <a-spin :spinning="loading">
        <a-table
          :columns="columns"
          :data-source="tableData"
          :pagination="false"
          :row-key="(record) => record.id"
        >
          <template slot="buildingOwnerPhone" slot-scope="text, record">
            <div class="phone-cell">
              <span>{{
                record.showPhone ? text : $desensitizePhone(text)
              }}</span>
              <a-icon
                :type="record.showPhone ? 'eye-invisible' : 'eye'"
                @click.stop="togglePhoneVisibility(record)"
              />
            </div>
          </template>
          <span slot="status" slot-scope="text, record">
            <a-switch
              :checked="record.status === 0"
              @change="(checked) => onStatusChange(checked, record)"
            />
          </span>
          <span
            slot="action"
            slot-scope="text, record"
            style="white-space: nowrap"
          >
            <a @click="view(record)" v-hasPermi="['zhonghe:ldznr:view']"
              >查看</a
            >
            <a-divider type="vertical" />
            <a @click="editFn(record)" v-hasPermi="['zhonghe:ldznr:edit']"
              >修改</a
            >
            <a-divider type="vertical" />
            <a
              @click="delFn(record)"
              class="red"
              v-hasPermi="['zhonghe:ldznr:del']"
              >删除</a
            >
          </span>
        </a-table>
        <div class="page_box">
          <a-pagination
            v-model="queryForm.offset"
            :page-size-options="['20', '30', '40', '50']"
            :total="total"
            show-size-changer
            :page-size="queryForm.current"
            @showSizeChange="onShowSizeChange"
            @change="pageChange"
            :show-total="(total) => `共 ${total} 条`"
          ></a-pagination>
        </div>
      </a-spin>
    </a-row>
    <a-modal
      :title="title"
      :visible="dialogVisible"
      width="30%"
      @cancel="dialogVisible = false"
    >
      <a-form
        :form="form"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 19 }"
        style="height: 550px; overflow-y: auto"
      >
        <a-form-item label="楼栋长姓名">
          <template v-if="type === 'View'">
            {{ currentRecord.buildingOwner }}
          </template>
          <a-input
            v-else
            style="width: 100%"
            v-decorator="[
              'buildingOwner',
              {
                rules: [{ required: true, message: '请输入楼栋长姓名' }],
              },
            ]"
            placeholder="请输入楼栋长姓名"
          />
        </a-form-item>
        <a-form-item label="性别">
          <template v-if="type === 'View'">
            {{
              genderList.find((item) => item.value === currentRecord.gender)
                .label
            }}
          </template>
          <a-select
            v-else
            style="width: 100%"
            v-decorator="[
              'gender',
              {
                rules: [{ required: true, message: '请选择性别' }],
              },
            ]"
            placeholder="请选择性别"
          >
            <a-select-option
              v-for="item in genderList"
              :key="item.value"
              :value="item.value"
            >
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="联系方式">
          <template v-if="type === 'View'">
            {{ currentRecord.buildingOwnerPhone }}
          </template>
          <a-input
            v-else
            style="width: 100%"
            v-decorator="[
              'buildingOwnerPhone',
              {
                rules: [{ required: true, message: '请输入联系方式' }],
              },
            ]"
            placeholder="请输入联系方式"
          />
        </a-form-item>

        <a-form-item label="小区名称">
          <template v-if="type === 'View'">
            {{ currentRecord.areaName }}
          </template>
          <a-input
            v-else
            style="width: 100%"
            v-decorator="[
              'areaName',
              {
                rules: [{ required: true, message: '请输入小区名称' }],
              },
            ]"
            placeholder="请输入小区名称"
          />
        </a-form-item>

        <a-form-item label="楼栋名称">
          <template v-if="type === 'View'">
            {{ currentRecord.buildingName }}
          </template>
          <a-input
            v-else
            style="width: 100%"
            v-decorator="[
              'buildingName',
              {
                rules: [{ required: true, message: '请输入楼栋名称' }],
              },
            ]"
            placeholder="请输入楼栋名称"
          />
        </a-form-item>
        <a-form-item label="层数">
          <template v-if="type === 'View'">
            {{ currentRecord.layersNum }}
          </template>
          <a-input
            v-else
            style="width: 100%"
            v-decorator="[
              'layersNum',
              {
                rules: [{ required: true, message: '请输入层数' }],
              },
            ]"
            placeholder="请输入层数"
          />
        </a-form-item>
        <a-form-item label="单元数">
          <template v-if="type === 'View'">
            {{ currentRecord.unitNum }}
          </template>
          <a-input
            v-else
            style="width: 100%"
            v-decorator="[
              'unitNum',
              {
                rules: [{ required: true, message: '请输入单元数' }],
              },
            ]"
            placeholder="请输入单元数"
          />
        </a-form-item>
        <a-form-item label="所在地">
          <template v-if="type === 'View'">
            {{ currentRecord.buildingAddr }}
          </template>
          <a-input
            v-else
            style="width: 100%"
            v-decorator="[
              'buildingAddr',
              {
                rules: [{ required: true, message: '请输入所在地' }],
              },
            ]"
            placeholder="请输入所在地"
          />
        </a-form-item>
        <a-form-item label="楼栋户数">
          <template v-if="type === 'View'">
            {{ currentRecord.familyNum }}
          </template>
          <a-input
            v-else
            style="width: 100%"
            v-decorator="[
              'familyNum',
              {
                rules: [{ required: true, message: '请输入楼栋户数' }],
              },
            ]"
            placeholder="请输入楼栋户数"
          />
        </a-form-item>
        <a-form-item label="楼栋人数">
          <template v-if="type === 'View'">
            {{ currentRecord.humanNum }}
          </template>
          <a-input
            v-else
            style="width: 100%"
            v-decorator="[
              'humanNum',
              {
                rules: [{ required: true, message: '请输入楼栋人数' }],
              },
            ]"
            placeholder="请输入楼栋人数"
          />
        </a-form-item>

        <a-form-item label="当选时间">
          <template v-if="type === 'View'">
            {{ currentRecord.pushTime }}
          </template>
          <a-date-picker
            v-else
            style="width: 100%"
            valueFormat="YYYY-MM-DD"
            v-decorator="[
              'pushTime',
              {
                rules: [{ required: false }],
              },
            ]"
            placeholder="请输入当选时间"
          />
        </a-form-item>
      </a-form>
      <template slot="footer">
        <BtnFooter
          :loading="submitLoading"
          :isShowOk="type !== 'View'"
          @cancel="dialogVisible = false"
          @ok="handleSubmit"
        />
      </template>
    </a-modal>
  </div>
</template>

<script>
import crudMixin from "@/mixins/crudMixin";
import { genderList, educationList, governmentStatusList } from "../zzdw/form";
import BtnFooter from "@/component/btnFooter.vue";
import moment from "moment";
export default {
  mixins: [crudMixin],
  components: {
    BtnFooter,
  },

  data() {
    return {
      genderList: genderList,
      dateRange: [],
      // 请求配置 - 这里定义每个操作的请求格式
      requestConfig: {
        Add: {
          method: "post",
          type: "formData", // 新增请求使用 formData 格式
          url: "/government-platform-center/buildingOwnerRecord",
        },
        Edit: {
          method: "post",
          type: "formData", // 修改请求使用 JSON 格式
          url: "/government-platform-center/buildingOwnerRecord/edit",
        },
        Del: {
          method: "post",
          type: "formData", // 删除请求使用 formData 格式
          url: "/government-platform-center/buildingOwnerRecord/deleteById",
        },
        Detail: {
          method: "get",
          type: "json",
          url: "",
        },
        Get: {
          method: "get",
          type: "json",
          url: "/government-platform-center/buildingOwnerRecord",
        },
      },
      // 模态框配置
      modalConfig: {
        addTitle: "新增栋长信息",
        editTitle: "修改栋长信息",
        viewTitle: "查看栋长信息",
        deleteConfirm: "确定要删除该栋长信息吗？删除后不可恢复！",
      },

      // 表单对象
      form: this.$form.createForm(this, { name: "coordinated" }),

      // 列配置
      columns: [
        {
          title: "栋长ID",
          dataIndex: "id",
          key: "id",
        },
        {
          title: "楼栋长姓名",
          dataIndex: "buildingOwner",
          key: "buildingOwner",
        },
        {
          title: "楼栋长联系方式",
          dataIndex: "buildingOwnerPhone",
          key: "buildingOwnerPhone",
          scopedSlots: { customRender: "buildingOwnerPhone" },
          width: 150,
        },
        {
          title: "性别",
          dataIndex: "gender",
          key: "gender",
          customRender: (text, record) => {
            return this.genderList.find((item) => item.value === record.gender)
              .label;
          },
        },
        {
          title: "小区名称",
          dataIndex: "areaName",
          key: "areaName",
        },
        {
          title: "楼栋名称",
          dataIndex: "buildingName",
          key: "buildingName",
        },
        {
          title: "层数",
          dataIndex: "layersNum",
          key: "layersNum",
        },
        {
          title: "单元数",
          dataIndex: "unitNum",
          key: "unitNum",
        },
        {
          title: "所在地",
          dataIndex: "buildingAddr",
          key: "buildingAddr",
        },
        {
          title: "楼栋户数",
          dataIndex: "familyNum",
          key: "familyNum",
        },
        {
          title: "楼栋人数",
          dataIndex: "humanNum",
          key: "humanNum",
        },
        {
          title: "当选时间",
          dataIndex: "pushTime",
          key: "pushTime",
        },
        {
          title: "最近更新时间",
          dataIndex: "updateTime",
          key: "updateTime",
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          key: "createTime",
        },
        {
          title: "操作",
          key: "action",
          scopedSlots: { customRender: "action" },
          width: 150,
        },
      ],
    };
  },

  methods: {
    moment,
    onChangePushTime(dateString) {
      this.queryForm.startTime = dateString[0];
      this.queryForm.endTime = dateString[1];
    },
    getName(val) {
      console.log(val, "val---");
    },
    formatAddData(data = {}) {
      return {
        status: 0,
        ...data,
      };
    },
    addFn() {
      this.add();
    },
    editFn(val) {
      this.edit(val);
    },
    delFn(val) {
      this.del(val);
    },
    // 处理状态改变
    onStatusChange(checked, record) {
      const url = "/government-platform-center/organization/updateStatus";
      const params = {
        id: record.id,
        status: checked ? 1 : 0, // 转换为后端需要的数字类型
      };

      this.$axios
        .post(url, params)
        .then((res) => {
          if (res.data.code === 0) {
            this.$message.success("状态修改成功");
            this.getList();
          } else {
            this.$message.error(res.data.msg || "操作失败");
          }
        })
        .catch((err) => {
          console.error("状态更新错误:", err);
          this.$message.error("操作失败");
        });
    },
    reset() {
      this.dateRange = [];
      this.cleanQuery();
    },
    togglePhoneVisibility(record) {
      this.$set(record, "showPhone", !record.showPhone);
    },
  },

  mounted() {
    this.getList();
  },
};
</script>

<style lang="scss" scoped>
.ant-row {
  border-radius: 5px;
  background: #fff;
  color: #000;
}

v-deep {
  .ant-table-thead > tr > th {
    color: #000;
    font-weight: bold;
  }
  .ant-table-tbody > tr > td {
    color: #000;
  }
  .el-table thead {
    color: black;
    font-weight: bold;
    background: #fafafa;
  }
  .el-table th.el-table__cell {
    background: #fafafa;
  }
}

.ant-col {
  margin: 10px 0;
}

.ant-select {
  width: 60%;
}

.ant-input {
  width: 60%;
}

@media screen and (max-width: 1300px) {
  .el-input {
    width: 70%;
  }

  .el-select {
    width: 70%;
  }

  .app {
    width: calc(100% - 50px);
  }
}

@media screen and (max-width: 1100px) {
  .el-input {
    width: 90%;
  }

  .el-select {
    width: 90%;
  }
}
.img {
  width: 50px;
  height: 50px;
}
.btn_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.flex-between {
  display: flex;
  justify-content: space-between;
}
.flex-start {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}
.flex-end {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>
